<template>
  <div>
    <div class="demo1-container">
      <vxe-button @click="changeLang('javascript')" class="btn">javascript</vxe-button>
      <vxe-button @click="changeLang('sql')" class="btn">sql</vxe-button>
      <vxe-button @click="changeLang('css')" class="btn">css</vxe-button>
      <vxe-button @click="changeLang('json')" class="btn">json</vxe-button>
      <vxe-button @click="getValue()" class="btn">获取内容</vxe-button>
    </div>
    <CodeEditor v-model:code="code" :lang="lang" @ready="onReady" @change="onChange" @focus="onFocus" @blur="onBlur" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
// import beautify from 'js-beautify'
//
import CodeEditor from '@/components/CodeEditor.vue'

const lang = ref('javascript')
const changeLang = (l) => {
  console.log(l)
  lang.value = l
}

//
const code = ref(`<script setup lang="ts">
import { dateFormat, requestAnimationFrame, cancelAnimationFrame, rafTimeout, cancelRaf } from 'vue-amazing-ui'
<\/script>
`)
function onReady(payload) {
  console.log('ready', payload)
}
function onChange(value, viewUpdate) {
  console.log('change', value)
  console.log('change', viewUpdate)
}
function onFocus(viewUpdate) {
  console.log('focus', viewUpdate)
}
function onBlur(viewUpdate) {
  console.log('blur', viewUpdate)
}

function getValue() {
  console.log(code.value)
}

</script>
